﻿<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:prop="clr-namespace:Citrix.XaAdminMobile.Properties"
                    xmlns:local="clr-namespace:Citrix.XaAdminMobile"
                    xmlns:u="clr-namespace:Citrix.XaAdminMobile.Util"
                    xmlns:vm="clr-namespace:Citrix.XaAdminMobile.ViewModel"
                    xmlns:sys="clr-namespace:System;assembly=mscorlib"
                    xmlns:cmp="clr-namespace:Citrix.Cmp;assembly=Citrix.Cmp.Wpf">

  <!--=========================================================================================-->
  <!-- General app resources -->
  <LinearGradientBrush x:Key="ActiveSelectionHighlight" EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#FF819CC2" Offset="0"/>
    <GradientStop Color="#FF5275A5" Offset="1"/>
    <GradientStop Color="#FF5E84B8" Offset="0.5"/>
    <GradientStop Color="#FF678CBC" Offset="0.49"/>
  </LinearGradientBrush>
  
  <SolidColorBrush x:Key="BubbleBackgroundBrush" Color="#FFC4C4C4"/>

  <!-- Reset button background brush. -->
  <LinearGradientBrush x:Key="ResetBackground" StartPoint="0.5,0" EndPoint="0.5,1">
    <GradientStop Color="#FF990000" Offset="1"/>
    <GradientStop Color="#FFBE3535" Offset="0.502"/>
    <GradientStop Color="#FFD07676" Offset="0.49"/>
    <GradientStop Color="#FFDC8686"/>
  </LinearGradientBrush>


  <!--=========================================================================================-->
  <!-- Toolbar resources -->

  <GridLength x:Key="ToolbarHeight">44</GridLength>
  <sys:Double x:Key="ToolbarHeightAsDouble">44</sys:Double>

  <LinearGradientBrush x:Key="ToolbarBrush" EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#FF929395" Offset="0"/>
    <GradientStop Color="#FF4C4D50" Offset="0.5"/>
    <GradientStop Color="#FF363739" Offset="1"/>
    <GradientStop Color="#FF5F6062" Offset="0.49"/>
  </LinearGradientBrush>

  <Style x:Key="ToolbarBorderStyle" TargetType="Border">
    <Setter Property="Height" Value="{StaticResource ToolbarHeightAsDouble}"/>
    <Setter Property="Background" Value="{StaticResource ToolbarBrush}"/>
  </Style>

  <Style x:Key="ToolbarTitleTextEmbossStyle" TargetType="TextBlock">
    <Setter Property="Foreground" Value="White"/>
    <Setter Property="FontSize" Value="20"/>
    <Setter Property="FontWeight" Value="Normal"/>
    <Setter Property="VerticalAlignment" Value="Center"/>
    <Setter Property="TextTrimming" Value="CharacterEllipsis"/>
    <Setter Property="Effect">
      <Setter.Value>
        <DropShadowEffect BlurRadius="0" Color="DarkGray" Direction="90" ShadowDepth="1"/>
      </Setter.Value>
    </Setter>
  </Style>

  <!-- The data template for the master navigation toolbar used on multiple pages. -->
  <DataTemplate DataType="{x:Type vm:NavToolbarViewModel}">
    <Border Style="{DynamicResource ToolbarBorderStyle}">
      <Grid>
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="*"/>
          <ColumnDefinition Width="Auto"/>
          <ColumnDefinition Width="*"/>
          <ColumnDefinition Width="Auto"/>
          <ColumnDefinition Width="*"/>
          <ColumnDefinition Width="Auto"/>
          <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <Button Style="{DynamicResource NakedButtonStyle}"
                Command="{Binding PowerCommand}">
          <Path Style="{DynamicResource PowerIconStyle}"/>
        </Button>
        <Rectangle Grid.Column="1" Fill="LightGray" Width="1"/>

        <Button x:Name="ServersButton" Grid.Column="2" Content="{x:Static prop:Resources.ServersTag}"
                Style="{DynamicResource NakedButtonStyle}" Padding="0"
                FontSize="16" Command="{Binding ServersCommand}"/>
        <Rectangle Grid.Column="3" Fill="LightGray" Width="1"/>

        <Button x:Name="SessionsButton" Grid.Column="4" Content="{x:Static prop:Resources.SessionsTag}"
                Style="{DynamicResource NakedButtonStyle}" Padding="0"
                FontSize="16" Command="{Binding SessionsCommand}"/>
        <Rectangle Grid.Column="5" Fill="LightGray" Width="1"/>

        <Button x:Name="SettingsButtons" Grid.Column="6" Style="{DynamicResource NakedButtonStyle}"
                Command="{Binding SettingsCommand}">
          <Rectangle Fill="{DynamicResource SettingsBrush}"
                     HorizontalAlignment="Center" VerticalAlignment="Center"
                     Width="20" Height="20" Margin="15,0"/>
        </Button>

      </Grid>
    </Border>
    
    <!-- Triggers to show a highlight on the button associated with the active page -->
    <DataTemplate.Triggers>
      <DataTrigger Binding="{Binding IsServerPageActive}" Value="True">
        <Setter TargetName="ServersButton" Property="Background" Value="{DynamicResource ActiveSelectionHighlight}" />
      </DataTrigger>
      <DataTrigger Binding="{Binding IsSessionsPageActive}" Value="True">
        <Setter TargetName="SessionsButton" Property="Background" Value="{DynamicResource ActiveSelectionHighlight}" />
      </DataTrigger>
      <DataTrigger Binding="{Binding IsSettingsPageActive}" Value="True">
        <Setter TargetName="SettingsButtons" Property="Background" Value="{DynamicResource ActiveSelectionHighlight}" />
      </DataTrigger>
    </DataTemplate.Triggers>
  </DataTemplate>

  <!--=========================================================================================-->
  <!-- Style for drawing separator lines. -->

  <Style x:Key="RectangleSeparatorStyle" TargetType="{x:Type Rectangle}">
    <Setter Property="SnapsToDevicePixels" Value="True" />
    <Setter Property="Fill" Value="LightGray" />
    <Setter Property="Height" Value="{DynamicResource {x:Static cmp:DpiScaling.DeviceDependentSeparatorHeightKey}}" />
  </Style>

  <!--==========================================================================================-->
  <!-- A simple button with no frame - it just appears as content over the background. It provides
    a selection highlight when the button is pressed. -->
  <Style x:Key="NakedButtonStyle" TargetType="{x:Type Button}">
    <Setter Property="Foreground" Value="White"/>
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Padding" Value="5"/>
    <Setter Property="FontSize" Value="12"/>
    <Setter Property="FontWeight" Value="Bold"/>
    <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type Button}">
          <Grid>
            <!-- Transparent surface to give the button a full rectangular hit area and display
              a selection highlight. -->
            <Rectangle x:Name="Highlight" Fill="{DynamicResource ActiveSelectionHighlight}" Opacity="0"/>
            <ContentPresenter
                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                Margin="{TemplateBinding Padding}" RecognizesAccessKey="True"
                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
          </Grid>
          <ControlTemplate.Triggers>
            <Trigger Property="IsEnabled" Value="false">
              <Setter Property="Foreground" Value="DarkGray"/>
            </Trigger>
            <Trigger Property="IsPressed" Value="True">
              <Setter TargetName="Highlight" Property="Opacity" Value="100" />
              <Trigger.ExitActions>
                <BeginStoryboard>
                  <Storyboard>
                    <DoubleAnimation
                        Storyboard.TargetName="Highlight" Storyboard.TargetProperty="Opacity"
                        From="100" To="0" Duration="0:0:0.5" FillBehavior="Stop" />
                  </Storyboard>
                </BeginStoryboard>
              </Trigger.ExitActions>
            </Trigger>
          </ControlTemplate.Triggers>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <!--=========================================================================================-->
  <!-- Custom listbox and listbox item styles. -->

  <!-- We override the default list box item template to use our skinned colours. We also add a
    default separator line. -->
  <Style x:Key="{x:Type ListBoxItem}" TargetType="{x:Type ListBoxItem}">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
    <Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
    <Setter Property="Padding" Value="0"/>
    <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type ListBoxItem}">
          <Grid>
            <Grid.RowDefinitions>
              <RowDefinition Height="Auto"/>
              <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>

            <!-- The border provides the selection highlight. -->
            <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"
                    Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}"
                    SnapsToDevicePixels="true">
              <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
            </Border>

            <!-- Separator line -->
            <Rectangle Grid.Row="1" Style="{DynamicResource RectangleSeparatorStyle}"/>
          </Grid>
          <ControlTemplate.Triggers>
            <!-- Selected and has focus -->
            <Trigger Property="IsSelected" Value="true">
              <Setter Property="Background" TargetName="Bd" Value="{DynamicResource ActiveSelectionHighlight}"/>
              <Setter Property="Foreground" Value="White"/>
            </Trigger>
          </ControlTemplate.Triggers>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <!-- A custom listbox style that removes the listbox item highlight. We generally don't use
  the listbox selection mechanism, so we don't want the listbox selection triggering any
  highlights to be drawn. -->
  <Style x:Key="NoSelectionListBoxItem" TargetType="{x:Type ListBoxItem}">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
    <Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
    <Setter Property="Padding" Value="0"/>
    <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type ListBoxItem}">
          <Grid>
            <Grid.RowDefinitions>
              <RowDefinition Height="Auto"/>
              <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>

            <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"
                    Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}"
                    SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">
              <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
            </Border>

            <!-- Separator line -->
            <Rectangle x:Name="separator" Grid.Row="1" Style="{DynamicResource RectangleSeparatorStyle}"/>
          </Grid>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>
  
  <!-- A variant which doesn't show a separator after the last item in the list. -->
  <Style x:Key="NoLastSeparatorListBoxItem" TargetType="{x:Type ListBoxItem}">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
    <Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
    <Setter Property="Padding" Value="0"/>
    <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type ListBoxItem}">
          <Grid>
            <Grid.RowDefinitions>
              <RowDefinition Height="Auto"/>
              <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>

            <!-- Separator line. -->
            <Rectangle x:Name="separator" Style="{DynamicResource RectangleSeparatorStyle}"/>

            <!-- The border provides the selection highlight. -->
            <Border x:Name="Bd" Grid.Row="1" BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
              <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
            </Border>

          </Grid>
          <ControlTemplate.Triggers>
            <!-- Selected and has focus -->
            <Trigger Property="IsSelected" Value="true">
              <Setter Property="Background" TargetName="Bd" Value="{DynamicResource ActiveSelectionHighlight}"/>
              <Setter Property="Foreground" Value="White"/>
            </Trigger>
            <!-- Hides the separator for the first item. -->
            <DataTrigger Binding="{Binding RelativeSource={RelativeSource PreviousData}}" Value="{x:Null}">
              <Setter Property="Visibility" TargetName="separator" Value="Collapsed"/>
            </DataTrigger>
          </ControlTemplate.Triggers>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>  

  <!-- Custom style that removes the visible border and shows a no items prompt when empty. -->
  <Style x:Key="CleanListboxStyle" TargetType="{x:Type ListBox}">
    <Setter Property="BorderBrush" Value="Transparent"/>
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
    <Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
    <Setter Property="ScrollViewer.PanningMode" Value="Both"/>
    <Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type ListBox}">
          <Border Background="{TemplateBinding Background}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="true">

            <Grid>
              <ScrollViewer x:Name="ScrollViewer" Focusable="false" Padding="{TemplateBinding Padding}">
                <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
              </ScrollViewer>

              <!-- The no items prompt, made visible when the list is not empty. -->
              <TextBlock x:Name="NoItemsPrompt" Text="{x:Static prop:Resources.ListboxEmptyPrompt}" Visibility="Collapsed"
                           HorizontalAlignment="Center" VerticalAlignment="Center"
                           Margin="20,0" FontSize="16" Foreground="Gray"/>

            </Grid>
          </Border>
          <ControlTemplate.Triggers>
            <Trigger Property="IsGrouping" Value="true">
              <Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
            </Trigger>
            <!-- Shows the empty prompt when there are no items in the list. -->
            <Trigger Property="HasItems" Value="False">
              <Setter TargetName="ScrollViewer" Property="Visibility" Value="Collapsed"/>
              <Setter TargetName="NoItemsPrompt" Property="Visibility" Value="Visible"/>
            </Trigger>
          </ControlTemplate.Triggers>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <!--=========================================================================================-->
  <!-- Custom scrollbar resources -->

  <!-- Misc constants consumed in the scrollbar template/style definition. -->
  <sys:Double x:Key="ScrollbarWidth">4</sys:Double>
  <GridLength x:Key="ScrollbarWidthAsGridLength">4</GridLength>
  <CornerRadius x:Key="ScrollbarSliderCornerRadius">2</CornerRadius>
  <SolidColorBrush x:Key="ScrollbarBackgroundBrush">#00000000</SolidColorBrush>
  <SolidColorBrush x:Key="ScrollbarSliderBrush">#88000000</SolidColorBrush>

  <!-- Style for the slider in a scrollbar. -->
  <Style x:Key="ScrollBarThumb" TargetType="{x:Type Thumb}">
    <Setter Property="IsTabStop" Value="false"/>
    <Setter Property="Focusable" Value="false"/>
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type Thumb}">
          <Border x:Name="Border"
                    CornerRadius="{DynamicResource ScrollbarSliderCornerRadius}"
                    Background="{DynamicResource ScrollbarSliderBrush}">
          </Border>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <!-- Above and below the slider is the "background" of the scrollbar. You can click on this
    background to trigger per-page scrolling. This background is in fact one of these buttons. We
    display one of these transparent buttons above and below the slider to get the per-page
    scrolling behaviour when this area is clicked. -->
  <Style x:Key="ScrollBarPageButton" TargetType="{x:Type RepeatButton}">
    <Setter Property="IsTabStop" Value="false"/>
    <Setter Property="Focusable" Value="false"/>
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type RepeatButton}">
          <Border Background="Transparent" />
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <!-- This style sets our custom scroll bar as the default scroll bar style for the entire
    application. -->
  <Style x:Key="{x:Type ScrollBar}" TargetType="{x:Type ScrollBar}">
    <Setter Property="OverridesDefaultStyle" Value="true"/>
    <Setter Property="Width" Value="{DynamicResource ScrollbarWidth}"/>
    <Setter Property="MinWidth" Value="{DynamicResource ScrollbarWidth}"/>
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type ScrollBar}">
          <Grid>
            <Border CornerRadius="{DynamicResource ScrollbarSliderCornerRadius}"
                      Background="{DynamicResource ScrollbarBackgroundBrush}" />
            <Track Name="PART_Track" IsDirectionReversed="true">
              <Track.DecreaseRepeatButton>
                <RepeatButton Style="{DynamicResource ScrollBarPageButton}"/>
              </Track.DecreaseRepeatButton>
              <Track.Thumb>
                <Thumb Style="{DynamicResource ScrollBarThumb}" />
              </Track.Thumb>
              <Track.IncreaseRepeatButton>
                <RepeatButton Style="{DynamicResource ScrollBarPageButton}"/>
              </Track.IncreaseRepeatButton>
            </Track>
          </Grid>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
    <Style.Triggers>
      <Trigger Property="Orientation" Value="Horizontal">
        <Setter Property="Width" Value="Auto"/>
        <Setter Property="MinWidth" Value="0"/>
        <Setter Property="Height" Value="{DynamicResource ScrollbarWidth}"/>
        <Setter Property="MinHeight" Value="{DynamicResource ScrollbarWidth}"/>
        <Setter Property="Template">
          <Setter.Value>
            <ControlTemplate TargetType="{x:Type ScrollBar}">
              <Grid>
                <Border CornerRadius="{DynamicResource ScrollbarSliderCornerRadius}"
                          Background="{DynamicResource ScrollbarBackgroundBrush}" />
                <Track Name="PART_Track" IsDirectionReversed="false">
                  <Track.DecreaseRepeatButton>
                    <RepeatButton Style="{DynamicResource ScrollBarPageButton}"/>
                  </Track.DecreaseRepeatButton>
                  <Track.Thumb>
                    <Thumb Style="{DynamicResource ScrollBarThumb}" />
                  </Track.Thumb>
                  <Track.IncreaseRepeatButton>
                    <RepeatButton Style="{DynamicResource ScrollBarPageButton}"/>
                  </Track.IncreaseRepeatButton>
                </Track>
              </Grid>
            </ControlTemplate>
          </Setter.Value>
        </Setter>
      </Trigger>
    </Style.Triggers>
  </Style>

  <SolidColorBrush x:Key="PageScrollStrokeBrush" Color="#FFEEEEEE"/>
  <Color x:Key="ScrollButtonDropShadowColor">#FFDEDEDE</Color>

  <!-- Page scroll button path styles. -->
  <Style x:Key="UpArrowStyle" TargetType="{x:Type Path}">
    <Setter Property="Data" Value="M0,20 L20,0 40,20 32,20 32,40 8,40 8,20 z"/>
    <Setter Property="Fill" Value="Transparent"/>
    <Setter Property="Stroke" Value="{StaticResource PageScrollStrokeBrush}"/>
    <Setter Property="Effect">
      <Setter.Value>
        <DropShadowEffect BlurRadius="2" Color="{StaticResource ScrollButtonDropShadowColor}" ShadowDepth="1"/>
      </Setter.Value>
    </Setter>
  </Style>
  <Style x:Key="RightArrowStyle" TargetType="{x:Type Path}" BasedOn="{StaticResource UpArrowStyle}">
    <Setter Property="Effect">
      <Setter.Value>
        <DropShadowEffect BlurRadius="2" Color="{StaticResource ScrollButtonDropShadowColor}" ShadowDepth="1" Direction="90"/>
      </Setter.Value>
    </Setter>
    <Setter Property="LayoutTransform">
      <Setter.Value>
        <RotateTransform Angle="90"/>
      </Setter.Value>
    </Setter>
  </Style>
  <Style x:Key="DownArrowStyle" TargetType="{x:Type Path}">
    <Setter Property="Data" Value="M8,0 L32,0 32,20 40,20 20,40 0,20 8,20 z"/>
    <Setter Property="Fill" Value="Transparent"/>
    <Setter Property="Stroke" Value="{StaticResource PageScrollStrokeBrush}"/>
    <Setter Property="Effect">
      <Setter.Value>
        <DropShadowEffect BlurRadius="2" Color="{StaticResource ScrollButtonDropShadowColor}" ShadowDepth="1"/>
      </Setter.Value>
    </Setter>
  </Style>
  <Style x:Key="LeftArrowStyle" TargetType="{x:Type Path}" BasedOn="{StaticResource DownArrowStyle}">
    <Setter Property="Effect">
      <Setter.Value>
        <DropShadowEffect BlurRadius="2" Color="{StaticResource ScrollButtonDropShadowColor}" ShadowDepth="1" Direction="90"/>
      </Setter.Value>
    </Setter>
    <Setter Property="LayoutTransform">
      <Setter.Value>
        <RotateTransform Angle="90"/>
      </Setter.Value>
    </Setter>
  </Style>
  <Style x:Key="ScrollToTopStyle" TargetType="{x:Type Path}">
    <Setter Property="Fill" Value="{StaticResource PageScrollStrokeBrush}"/>
    <Setter Property="Stroke" Value="{StaticResource PageScrollStrokeBrush}"/>
    <Setter Property="Effect">
      <Setter.Value>
        <DropShadowEffect BlurRadius="2" Color="{StaticResource ScrollButtonDropShadowColor}" ShadowDepth="1"/>
      </Setter.Value>
    </Setter>
    <Setter Property="Data">
      <Setter.Value>
        <GeometryGroup>
          <PathGeometry Figures="M0,25 L20,5 40,25 32,25 32,45 8,45 8,25 z" />
          <PathGeometry Figures="M1.3,24.5 L20,6 38.7,24.5 31,24.5 31,44 9,44 9,24.5 z" />
          <PathGeometry Figures="M0,0 L40,0 40,2 0,2 z" />
        </GeometryGroup>
      </Setter.Value>
    </Setter>
  </Style>

  <!--=========================================================================================-->
  <!-- Custom scroll viewer that overlays the the scroll bars over the content to save on
    space. -->
  <Style x:Key="{x:Type ScrollViewer}" TargetType="{x:Type ScrollViewer}">
    <Style.Resources>
      <u:HideLowPagesScrollButtonConverter x:Key="HideLowPagesConverter"/>
    </Style.Resources>
    <Setter Property="OverridesDefaultStyle" Value="True" />
    <Setter Property="u:KineticScrollingBehaviour.HandleKineticScrolling" Value="True"/>
    <Setter Property="u:KineticScrollingBehaviour.Friction" Value="0.92"/>
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type ScrollViewer}">
          <Grid>

            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="*"/>
              <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
              <RowDefinition Height="*"/>
              <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>

            <ScrollContentPresenter x:Name="PART_ScrollContentPresenter"
                                      Grid.Column="0" Grid.Row="0"
                                      Grid.ColumnSpan="2" Grid.RowSpan="2"
                                      Margin="{TemplateBinding Padding}" 
                                      Content="{TemplateBinding Content}"
                                      ContentTemplate="{TemplateBinding ContentTemplate}"
                                      CanContentScroll="{TemplateBinding CanContentScroll}"
                                      CanHorizontallyScroll="False" CanVerticallyScroll="False"/>
            <ScrollBar Orientation="Vertical" Grid.Row="0" Grid.Column="1"
                         Cursor="Arrow"
                         Maximum="{TemplateBinding ScrollableHeight}" Minimum="0"
                         Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"
                         ViewportSize="{TemplateBinding ViewportHeight}"
                         Name="PART_VerticalScrollBar"
                         Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
                         AutomationProperties.AutomationId="VerticalScrollBar"/>
            <ScrollBar Orientation="Horizontal" Grid.Row="1" Grid.Column="0"
                         Cursor="Arrow"
                         Maximum="{TemplateBinding ScrollableWidth}" Minimum="0"
                         Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"
                         ViewportSize="{TemplateBinding ViewportWidth}"
                         Name="PART_HorizontalScrollBar"
                         Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
                         AutomationProperties.AutomationId="HorizontalScrollBar"/>

            <!-- Floating buttons. -->
            <Grid>
              <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
              </Grid.RowDefinitions>

              <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
              </Grid.ColumnDefinitions>

              <!-- Scroll to top button -->
              <Button
                x:Name="ScrollToTop"
                Grid.Column="3" Grid.Row="0" Command="{x:Static ScrollBar.ScrollToHomeCommand}"
                Style="{DynamicResource NakedButtonStyle}" Padding="2,5"
                Visibility="{Binding ElementName=PART_VerticalScrollBar, Path=Visibility}"
                Opacity="0">
                <Path Style="{StaticResource ScrollToTopStyle}"/>
              </Button>

              <!-- Page Up button -->
              <RepeatButton
                x:Name="PageUp"
                Grid.Column="3" Grid.Row="2" Command="{x:Static ScrollBar.PageUpCommand}"
                Style="{DynamicResource NakedRepeatButtonStyle}" Padding="2,5"
                Visibility="{Binding ElementName=PART_VerticalScrollBar, Path=Visibility}">
                <Path Style="{StaticResource UpArrowStyle}"/>
              </RepeatButton>

              <!-- Page Down button -->
              <RepeatButton
                x:Name="PageDown"
                Grid.Column="3" Grid.Row="3" Command="{x:Static ScrollBar.PageDownCommand}"
                Style="{DynamicResource NakedRepeatButtonStyle}" Padding="2,5"
                Visibility="{Binding ElementName=PART_VerticalScrollBar, Path=Visibility}">
                <Path Style="{StaticResource DownArrowStyle}"/>
              </RepeatButton>

              <!-- Page Left button -->
              <RepeatButton
                x:Name="PageLeft"
                Grid.Column="1" Grid.Row="3" Command="{x:Static ScrollBar.PageLeftCommand}"
                Style="{DynamicResource NakedRepeatButtonStyle}" Padding="5,2"
                Visibility="{Binding ElementName=PART_HorizontalScrollBar, Path=Visibility}">
                <Path Style="{StaticResource LeftArrowStyle}"/>
              </RepeatButton>

              <!-- Page Right button -->
              <RepeatButton
                x:Name="PageRight"
                Grid.Column="2" Grid.Row="3" Command="{x:Static ScrollBar.PageRightCommand}"
                Style="{DynamicResource NakedRepeatButtonStyle}" Padding="5,2"
                Visibility="{Binding ElementName=PART_HorizontalScrollBar, Path=Visibility}">
                <Path Style="{StaticResource RightArrowStyle}"/>
              </RepeatButton>
            </Grid>
            
          </Grid>

          <ControlTemplate.Triggers>

            <!-- Animate the opacity to dynamically show/hide the scroll to top button when the user
            clicks anywhere in the scroll viewer. -->
            <EventTrigger RoutedEvent="PreviewMouseDown">
              <BeginStoryboard>
                <Storyboard Timeline.DesiredFrameRate="10">
                  <DoubleAnimationUsingKeyFrames
                    Duration="0:0:4"
                    FillBehavior="Stop"
                    Storyboard.TargetProperty="Opacity"
                    Storyboard.TargetName="ScrollToTop">
                    <DiscreteDoubleKeyFrame Value="1" KeyTime="0:0:0" />
                    <DiscreteDoubleKeyFrame Value="1" KeyTime="0:0:3.5" />
                    <LinearDoubleKeyFrame Value="0" KeyTime="0:0:4" />
                  </DoubleAnimationUsingKeyFrames>
                </Storyboard>
              </BeginStoryboard>
            </EventTrigger>

            <!-- Hide the scroll to top button when we can't scroll vertically any further -->
            <MultiDataTrigger>
              <MultiDataTrigger.Conditions>
                <Condition Binding="{Binding ElementName=PART_VerticalScrollBar, Path=Value}" Value="0" />
                <Condition Binding="{Binding ElementName=PART_VerticalScrollBar, Path=Visibility}" Value="Visible" />
              </MultiDataTrigger.Conditions>
              <Setter TargetName="ScrollToTop" Property="Visibility" Value="Hidden"/>
            </MultiDataTrigger>

            <!-- Hide the scroll to top button when it is fully transparent. We animate the Opacity to
            give the appearance of it hiding. However we won't want users clicking it when they can't
            see it. -->
            <MultiDataTrigger>
              <MultiDataTrigger.Conditions>
                <Condition Binding="{Binding ElementName=ScrollToTop, Path=Opacity}" Value="0"/>
                <Condition Binding="{Binding ElementName=PART_VerticalScrollBar, Path=Visibility}" Value="Visible" />
              </MultiDataTrigger.Conditions>
              <Setter TargetName="ScrollToTop" Property="Visibility" Value="Hidden"/>
            </MultiDataTrigger>

            <!-- Hide the vertical scroll buttons when we don't have far to scroll in the vertical
            dimension. -->
            <DataTrigger Value="True">
              <DataTrigger.Binding>
                <MultiBinding Converter="{StaticResource HideLowPagesConverter}">
                  <Binding ElementName="PART_VerticalScrollBar" Path="Maximum"/>
                  <Binding ElementName="PART_VerticalScrollBar" Path="ViewportSize"/>
                  <Binding ElementName="PART_VerticalScrollBar" Path="Visibility"/>
                  <Binding ElementName="PART_VerticalScrollBar"/>
                </MultiBinding>
              </DataTrigger.Binding>

              <Setter TargetName="ScrollToTop" Property="Visibility" Value="Hidden"/>
              <Setter TargetName="PageUp" Property="Visibility" Value="Hidden"/>
              <Setter TargetName="PageDown" Property="Visibility" Value="Hidden"/>
            </DataTrigger>

            <!-- Hide the horizontal scroll buttons when we don't have far to scroll in the horizontal
            dimension. -->
            <DataTrigger Value="True">
              <DataTrigger.Binding>
                <MultiBinding Converter="{StaticResource HideLowPagesConverter}">
                  <Binding ElementName="PART_HorizontalScrollBar" Path="Maximum"/>
                  <Binding ElementName="PART_HorizontalScrollBar" Path="ViewportSize"/>
                  <Binding ElementName="PART_HorizontalScrollBar" Path="Visibility"/>
                  <Binding ElementName="PART_HorizontalScrollBar"/>
                </MultiBinding>
              </DataTrigger.Binding>

              <Setter TargetName="PageLeft" Property="Visibility" Value="Hidden"/>
              <Setter TargetName="PageRight" Property="Visibility" Value="Hidden"/>
            </DataTrigger>
          </ControlTemplate.Triggers>

        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <!--=========================================================================================-->
  <!-- Custom mobile friendly checkbox. -->
  <Style x:Key="ChunkyCheckBoxStyle" TargetType="{x:Type CheckBox}">
    <Setter Property="FontSize" Value="18"/>
    <Setter Property="Padding" Value="10"/>
    <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type CheckBox}">
          <ControlTemplate.Resources>

            <DrawingBrush x:Key="TickBrush" Stretch="Uniform">
              <DrawingBrush.Drawing>
                <DrawingGroup>
                  <DrawingGroup.Children>
                    <GeometryDrawing Brush="#FF5275A5" Geometry="F1 M 5.04509,11.2657L 0,7.76942L 1.55231,5.82708L 4.65697,8.93484C 4.65697,8.93484 9.02296,0.87405 11.2545,-3.8147e-006L 13.583,2.33082C 13.583,2.33082 9.02296,4.07895 5.04509,11.2657 Z "/>
                  </DrawingGroup.Children>
                </DrawingGroup>
              </DrawingBrush.Drawing>
            </DrawingBrush>

            <sys:Double x:Key="BorderSize">26</sys:Double>
          </ControlTemplate.Resources>

          <Grid>
            <!-- Provides the target for drawing highlights, as well as ensuring the full area
            is available for hit testing. -->
            <Rectangle x:Name="Background" Fill="Transparent"/>

            <!-- We place the main layout in a separate grid so we have a top level element to
            apply the padding to. -->
            <Grid Margin="{TemplateBinding Padding}">
              
              <Grid.ColumnDefinitions>
                <!-- The check/tick -->
                <ColumnDefinition Width="Auto"/>
                <!-- Margin between check and content. -->
                <ColumnDefinition Width="10"/>
                <!-- Content presenter -->
                <ColumnDefinition Width="*"/>
              </Grid.ColumnDefinitions>

              <!-- The "check". We display a border with a tick inside it. -->
              <Border Width="{StaticResource BorderSize}" Height="{StaticResource BorderSize}"
                CornerRadius="3" BorderBrush="Gray" BorderThickness="1"
                SnapsToDevicePixels="True"
                HorizontalAlignment="Left">
                <Border.Background>
                  <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FFD3D0D0" Offset="0"/>
                    <GradientStop Color="White" Offset="1"/>
                  </LinearGradientBrush>
                </Border.Background>

                <Rectangle x:Name="TheCheck" Fill="{StaticResource TickBrush}" Margin="3" Visibility="Hidden" />

              </Border>

              <!-- Content presenter. -->
              <ContentPresenter Grid.Column="2" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                Content="{TemplateBinding Content}"
                                ContentStringFormat="{TemplateBinding ContentStringFormat}"
                                ContentTemplate="{TemplateBinding ContentTemplate}"
                                RecognizesAccessKey="True" VerticalAlignment="Center"/>

            </Grid>
          </Grid>
          <ControlTemplate.Triggers>
            <Trigger Property="IsChecked" Value="True">
              <Setter TargetName="TheCheck" Property="Visibility" Value="Visible"/>
            </Trigger>
            <Trigger Property="IsEnabled" Value="False">
              <Setter TargetName="Background" Property="Fill" Value="LightGray"/>
            </Trigger>
          </ControlTemplate.Triggers>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <!--=========================================================================================-->
  <!-- Defines a TextBox without border. -->
  <Style x:Key="NoBorderTextBoxStyle" BasedOn="{x:Null}" TargetType="{x:Type TextBox}">
    <Setter Property="Padding" Value="1"/>
    <Setter Property="AllowDrop" Value="true"/>
    <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type TextBox}">
          <ScrollViewer x:Name="PART_ContentHost" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <!--=========================================================================================-->
  <DataTemplate DataType="{x:Type vm:SearchTriggerViewModel}">
    <Button Command="{Binding ActivateCommand}">
      <Button.Template>
        <ControlTemplate>
          <Grid Height="{DynamicResource ToolbarHeightAsDouble}">
            <Rectangle Fill="#FFC2C2C2"/>

            <Border Margin="5" CornerRadius="15" Background="White">
              <TextBlock Margin="15,0" VerticalAlignment="Center" FontSize="18"
                           Foreground="#FFC2C2C2" Text="{x:Static prop:Resources.SearchPrompt}"/>
            </Border>
          </Grid>
        </ControlTemplate>
      </Button.Template>
    </Button>
  </DataTemplate>

</ResourceDictionary>